.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #444;
  opacity: .6;
  .wrap {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: 0;
    width: 100%;
    height: calc(100% - 0.49rem);
    background-color: #fff;
    color: #2C2C2C;
    font-size: .24rem;
    border-top-right-radius: .1rem;
    border-top-left-radius: .1rem;
  }
  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .24rem .2rem;
    font-weight: 700;
    line-height: .32rem;
    .close {
      width: .18rem;
      height: .18rem;
    }
  }
  .search {
    display: flex;
    justify-content: space-between;
    position: relative;
    height: .4rem;
    margin: 0 .2rem;
    background: #F8F8F8;
    border-radius: .08rem;
    &Icon {
      position: absolute;
      top: .12rem;
      left: .15rem;
      width: .14rem;
      height: .14rem;
    }
    input {
      flex: 1;
      background: #F8F8F8;
      text-indent: .41rem;
      height: .4rem;
      line-height: .2rem;
      font-size: .15rem;
      font-weight: 400;
    }
  }
  .content {
    flex: 1;
    overflow-y: auto;
    .item {
      display: flex;
      align-items: center;
      height: 72px;
      padding: 0 .2rem;
    }
    .text {
      flex: 1;
      margin-left: .2rem;
      height: 72px;
      line-height: 72px;
      color: #000;
      font-size: .18rem;
      border-bottom: 1px solid #F0F0F0;
    }
  }
  .clear {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(-50%, -50%);
  }
  .empty {
    padding-top: .4rem;
    text-align: center;
    font-weight: 400;
    font-size: .16rem;
    line-height: .26rem;
    color: #C3C7CC;
  }
}
